<template>
  <div class="wrap" style="height: 300vh;position: relative;">
    <div style="position: absolute;top: 150vh; left: 0;height: 200px;width: 200px;background: #000;" v-lazy-component="load"></div>
  </div>
</template>

<script>
  export default {
    name: "IntersectionObserver",
    directives: {
      // 懒加载指令
      'lazy-component': {
        bind(el, binding) {
          if ('IntersectionObserver' in window) { // 先判断兼容性
            let observer = new IntersectionObserver((entries) => { // 如果可用，那么注册交叉监听器
              console.log('jiaocha', entries)
              const isIntersected = entries.some(entry => entry.intersectionRatio > 0); // 判断是否交叉
              if (isIntersected) { // 交叉
                binding.value(); // 执行绑定的方法

                observer.unobserve(el); // 当前元素接触监听

                observer.disconnect(); // 取消连接
              }
            }, {
              threshold: [0, 0.5, 1] // 交叉触发的阈值，交叉内容0%，50%，100%时执行回调函数
            });
            observer.observe(el); // 开始监听，绑定的元素必传
          } else {
            binding.value() // 如果不兼容，直接执行方法
          }
        }
      }
    },
    methods: {
      load() {
        console.log('懒加载数据')
      }
    }
  }
</script>

<style scoped>

</style>
